<script>
  export default {
    props: {
      formType: String,
      editDesc: String,
      value: {
        required: true
      }
    },
    components: {
      // uniPopup
    },
    data(){
      return {
        show: false,
        editValue: ''
      }
    },
    watch: {
      value(val){
        this.editValue = val
      }
    },
    methods: {
      handleEdit(){
        this.$refs.popup.open();
      },
      handleCance(){
        this.editValue = this.value
        this.$refs.popup.close();
      },
      handleConfirm(){
        this.$emit('confirm', this.editValue);
        this.handleCance();
        this.editValue = '';
      }
    }
  }
</script>

<template>
  <view>
    <view @click.stop="handleEdit">
      <slot>
        <view>{{ value || '点击编辑' }}</view>
      </slot>
    </view>
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" backgroundColor="#fff">
      <view class="flex flex-col gap-4 popup-container">
        <uni-datetime-picker class="custom" v-if="formType == 'date-range'" v-model="editValue" type="daterange" />
        <uni-easyinput v-else v-model="editValue" focus placeholder="请输入内容"></uni-easyinput>
        <view class="flex flex-col gap-4">
          <view>
            <button type="primary" @click="handleCance">取消</button>
          </view>
          <view>
            <button type="primary" @click="handleConfirm">确认</button>
          </view>
        </view>
        
      </view>
      
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
  .popup-container{
    padding: 10px;
    
  }

  .custom{
    /deep/ .uni-date-range--x{
      top: -400px !important;

      .uni-popper__arrow{
        bottom: -8px !important;
        transform: rotate(180deg) !important;
        top: auto !important;
      }
    }
  }
</style>